<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 引入 ECharts 文件 -->
		<script src="lib/echarts.js"></script>
		<script src="map/js/world.js"></script>
		<!--引入Jquery-->
		<script type="text/javascript" src="lib/jquery-3.1.1.js"></script>
		<!--引入bootstrap文件-->
		<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css">
		<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
		<!--引入万能table-->
		<link href="lib/functiontable/datatables.min.css" rel="stylesheet" type="text/css" />
		<link href="lib/functiontable/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
		<!-- END PAGE LEVEL PLUGINS -->
		<!-- BEGIN THEME GLOBAL STYLES -->
		<link href="lib/functiontable/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
		<link href="lib/functiontable/plugins.min.css" rel="stylesheet" type="text/css" />
		<!-- END THEME GLOBAL STYLES -->
		<!-- BEGIN THEME LAYOUT STYLES -->

		<!-- BEGIN PAGE LEVEL PLUGINS -->
		<script src="lib/functiontable/datatables.min.js" type="text/javascript"></script>
		<script src="lib/functiontable/datatables.bootstrap.js" type="text/javascript"></script>
		<!-- END PAGE LEVEL PLUGINS -->
		<!-- BEGIN THEME GLOBAL SCRIPTS -->
		<!--<script src="lib/functiontable/table-datatables-colreorder.min.js" type="text/javascript"></script>-->
		<!-- END PAGE LEVEL SCRIPTS -->
		<!-- BEGIN THEME LAYOUT SCRIPTS -->
		<!--万能表格引入完毕-->
	</head>

	<body style="background-color: #404a59;">
		<div class="col-md-12 " id="myChart" style="height: 500px;" align="center"></div>
		<div class="col-md-12" id="fair_info">

			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption font-dark">
						<i class="icon-settings font-dark"></i>
						<span class="caption-subject bold uppercase" id="fairtitle">TOP10 安全事件</span>
					</div>

				</div>
				<div class="portlet-body">
					<table class="table table-striped table-bordered table-hover" id="fairinfo">

						<thead>
							<tr>
								<th> 事件类型 </th>

								<th>事件发生次数 </th>
								<th> ID </th>
								<th>发生时间</th>
								<th> 事件ID </th>

								<th> 远程IP </th>
								<th> 本地IP </th>
								<th>远程端口</th>
								<th> 本地端口 </th>

								<th> 协议 </th>
								<th> DNS </th>
								<th>远程IP归属</th>
								<th> 本地IP归属 </th>

								<th> 连接方向</th>
								<th> 攻击源背景 </th>

							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
			</div>
		</div>

		<script>
			$.ajaxSetup({
				async: false
			});

			$.getTwoDensionArr = function(dension, len) {
				var arr = new Array();
				for(var i = 0; i < dension; i++) {
					arr[i] = new Array();
					for(var j = 0; j < len; j++) {
						arr[i][j] = "dafault";
					}
				}
				return arr;
			};
			//定义table数据的全局变量
			fair_switch_data = $.getTwoDensionArr(0, 15);

			sankey = {
				"nodes": [],
				"links": []
			};
			var all_fair_legend = [];
			var series = [];
			$.get_one_series = function(one_link, fair_type, count) {
				var one_series = {
					//echart中不可控制nodes的形状和鼠标事件，links也一样
					name: fair_type + ':' + count,
					type: 'sankey',
					layout: 'none',
					nodeGap: 50,
					data: sankey.nodes,
					links: sankey.links,
					itemStyle: {
						normal: {
							borderWidth: 1,
							borderColor: '#aaa',
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10
						}
					},
					lineStyle: {
						normal: {
							curveness: 0.8,
							color: 'source',
						}
					}
				};
				series.push(one_series);

			};

			$.get('static/data/top10Threat/top10Threat.json', function(data) {
				//页设定为全局变量，后面做table显示的时候要用
				attack_fair = data.data;
				var start_index = sankey.nodes.length;
				attack_fair.forEach(function(item, i) {
					all_fair_legend.push((item.sjlx2 + ':' + item.count));
					var attacker_ip = {};
					var underattacker_ip = {};
					var fair_type = {};
					var att_to_fair_links = {};
					var fair_to_tar_links = {};
					//通过连接方向决定攻击者和被攻击者
					var direction = item.detail[0].ljfx;
					if(direction === 1) {
						attacker_ip.name = item.detail[0].ycip;
						underattacker_ip.name = item.detail[0].bdip;

					} else {
						attacker_ip.name = item.detail[0].bdip;
						underattacker_ip.name = item.detail[0].ycip;
					}
					fair_type.name = item.sjlx2;
					//length_before 用于测试是否每个fair_item 都不相同
					var length_before = sankey.nodes.length;
					//当第一次进行数据导入时
					if(start_index === 0) {
						att_to_fair_links.source = start_index;
						att_to_fair_links.target = start_index + 1;
						att_to_fair_links.value = item.count;

						fair_to_tar_links.source = start_index + 1;
						fair_to_tar_links.target = start_index + 2;
						fair_to_tar_links.value = item.count;

						sankey.nodes.push(attacker_ip, fair_type, underattacker_ip);
						sankey.links.push(att_to_fair_links, fair_to_tar_links);
						start_index = start_index + 3;
						var one_node = [];
						var one_link = [];
						one_node.push(attacker_ip, fair_type, underattacker_ip);
						one_link.push(att_to_fair_links, fair_to_tar_links);
						$.get_one_series( one_link, fair_type.name, item.count);
					}
					//判断攻击ip,被攻击ip,和事件三者之中只有一个属性与sankey.nodes中已有数据项相同的情况
					else {
						sankey.nodes.forEach(function(inner_item, inner_i) {

							//这里还需要有个判断三者中有两个与前面的数据项相同的情况——等待后期解决

							if(inner_item.name === attacker_ip.name) {

								var attack_index = inner_i;
								att_to_fair_links.source = attack_index;
								att_to_fair_links.target = start_index;
								att_to_fair_links.value = item.count;

								fair_to_tar_links.source = start_index;
								fair_to_tar_links.target = start_index + 1;
								fair_to_tar_links.value = item.count;

								sankey.nodes.push(fair_type, underattacker_ip);
								sankey.links.push(att_to_fair_links, fair_to_tar_links);
								start_index = start_index + 2;

								var one_node = [];
								var one_link = [];
								one_node.push(fair_type, underattacker_ip);
								one_link.push(att_to_fair_links, fair_to_tar_links);
								$.get_one_series( one_link, fair_type.name, item.count);

							} else if(inner_item.name === underattacker_ip.name) {

								var underattack_index = inner_i;
								att_to_fair_links.source = start_index;
								att_to_fair_links.target = start_index + 1;
								att_to_fair_links.value = item.count;

								fair_to_tar_links.source = start_index + 1;
								fair_to_tar_links.target = underattack_index;
								fair_to_tar_links.value = item.count;
								sankey.nodes.push(attacker_ip, fair_type);
								sankey.links.push(att_to_fair_links, fair_to_tar_links);
								start_index = start_index + 2;

								var one_node = [];
								var one_link = [];
								one_node.push(attacker_ip, fair_type);
								one_link.push(att_to_fair_links, fair_to_tar_links);
								$.get_one_series(one_link, fair_type.name, item.count);

							} else if(inner_item.name === fair_type.name) {

								var fair_index = inner_i;
								att_to_fair_links.source = start_index;
								att_to_fair_links.target = fair_index;
								att_to_fair_links.value = item.count;

								fair_to_tar_links.source = fair_index;
								fair_to_tar_links.target = start_index + 1;
								fair_to_tar_links.value = item.count;
								sankey.nodes.push(attacker_ip, underattacker_ip);
								sankey.links.push(att_to_fair_links, fair_to_tar_links);
								start_index = start_index + 2;

								var one_node = [];
								var one_link = [];
								one_node.push(attacker_ip, underattacker_ip);
								one_link.push(att_to_fair_links, fair_to_tar_links);
								$.get_one_series( one_link, fair_type.name, item.count);

							}
						});

						var length_after = sankey.nodes.length;
						if(length_after === length_before) {
							//alert(start_index);
							att_to_fair_links.source = start_index;
							att_to_fair_links.target = start_index + 1;
							att_to_fair_links.value = item.count;

							fair_to_tar_links.source = start_index + 1;
							fair_to_tar_links.target = start_index + 2;
							fair_to_tar_links.value = item.count;

							sankey.nodes.push(attacker_ip, fair_type, underattacker_ip);
							sankey.links.push(att_to_fair_links, fair_to_tar_links);
							start_index = start_index + 3;

							var one_node = [];
							var one_link = [];
							one_node.push(attacker_ip, fair_type, underattacker_ip);
							one_link.push(att_to_fair_links, fair_to_tar_links);
							$.get_one_series(one_link, fair_type.name, item.count);

						}
					}

					//console.log(series);

				});
				//console.log(sankey);

			});
			console.log(series[0]);
			var myChart = echarts.init(document.getElementById('myChart'));
			myChart.hideLoading();

			myChart.setOption(option = {
				title: {
					//text: 'TOP10 安全事件'
				},
				legend: {
					y: 'top',
					data: all_fair_legend,
					textStyle: {
						color: '#fff',
						fontSize: 16
					}
				},
				tooltip: {
					trigger: 'item',
					triggerOn: 'mousemove'

				},
				series: series
					//[{
					//					//echart中不可控制nodes的形状和鼠标事件，links也一样
					//					name:'sankey',
					//					type: 'sankey',
					//					layout: 'none',
					//					nodeGap: 50,
					//					data: sankey.nodes,
					//					links: sankey.links,
					//					itemStyle: {
					//						normal: {
					//							borderWidth: 1,
					//							borderColor: '#aaa',
					//							shadowColor: 'rgba(0, 0, 0, 0.5)',
					//							shadowBlur: 10
					//						}
					//					},
					//					lineStyle: {
					//						normal: {
					//							curveness: 0.8,
					//							color: 'source',
					//						}
					//					}
					//				}]

			});
			
			
			myChart.on('mouseup', function(params) {
				// 控制台打印数据的名称
				//console.log(params.name + '	' + params.componentType + '	' + params.seriesType + '	' + params.dataType + '	' + params.dataIndex + '	' + params.seriesType + '	' + params.color);
				if(params.seriesType === "sankey") {
					//查找带有"事件"的点击项目
					var patt = /事件/g;
					if(patt.test(params.name)) {
						;
						
					}
				}
				});
			myChart.on('click', function(params) {
				// 控制台打印数据的名称
				//console.log(params.name + '	' + params.componentType + '	' + params.seriesType + '	' + params.dataType + '	' + params.dataIndex + '	' + params.seriesType + '	' + params.color);
				if(params.seriesType === "sankey") {
					//查找带有"事件"的点击项目
					var patt = /事件/g;
					if(patt.test(params.name)) {
						var all_fit_item = [];
						attack_fair.forEach(function(item, i) {
							if(item.sjlx2 === params.name) {

								all_fit_item.push(item);
							}

						});
						var table_rows = all_fit_item.length;
						//alert(table_rows);
						fair_switch_data = $.getTwoDensionArr(table_rows, 15);
						var temp = [];
						all_fit_item.forEach(function(item, i) {
							temp.push(item.sjlx2, item.count, item.detail[0].id, item.detail[0].sj, item.detail[0].sjid, item.detail[0].ycip, item.detail[0].bdip, item.detail[0].ycdk, item.detail[0].bddk, item.detail[0].xy, item.detail[0].dns, item.detail[0].ycwz, item.detail[0].bdwz, item.detail[0].ljfx, item.detail[0].gjybj);
							fair_switch_data[i] = temp;
							temp = [];

						});

					}
				}
				$('#fairinfo').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,
					"data": fair_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
				});

			});

			jQuery(document).ready(function() {

				$('#fairinfo').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,
					"data": fair_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

				});

			});
		</script>

	</body>

</html>